<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }

            ul {
                width: 800px;
                border: 10px red solid;
                /* 将ul设置为一个弹性容器 */
                display: flex;

                /* 
                  flex-direction 指定容器中弹性元素的排列方式
                    可选值:
                      row 默认值,弹性元素在容器中水平排列(左向右)
                          - 主轴 自左向右
                      row-reverse 弹性元素在容器中反向水平排列(右向左)
                          - 主轴 自右向左
                      column 弹性元素纵向排列(自上向下)
                      column-reverse 弹性元素反向纵向排列(自下向上)
                  
                    主轴:
                      弹性元素的排列方式称为主轴
                    
                    侧轴:
                      与主轴垂直方向的称为侧轴
                */
                flex-direction: column;
            }

            li {
                width: 100px;
                height: 100px;
                background-color: #bfa;
                font-size: 50px;
                text-align: center;
                line-height: 100px;

                /* 
                  弹性元素的属性:
                    flex-grow 指定弹性元素的伸展的系数
                    - 当父元素有多余的空间时,子元素如何伸展
                    - 父元素的剩余空间,会按照比例进行分配

                    flex-shrink 指定弹性元素的收缩系统
                    - 当父元素中的空间不足以容纳所有的子元素时,如何对子元素进行收缩
                    - 值越大收缩的越多
                */
                /* flex-grow: 1; */

                flex-shrink: 0;
            }

            li:nth-child(2) {
                background-color: pink;
                flex-grow: 2;
            }

            li:nth-child(3) {
                background-color: orange;
                flex-grow: 3;
            }
        </style>
    </head>
    <body>
        <!-- 
        flex(弹性盒,伸缩盒)
          - 是CSS中的又一种布局手段,它主要用来代替浮动来完成页面的布局。
          - flex可以使元素具有弹性,让元素跟随页面的大小的改变而改变。
          - 弹性容器
            - 要使用弹性盒,必须先将以个元素设置为弹性容器
            - 我们通过display 来设置弹性容器
                display:flex  设置为块级弹性容器
                display:inline-flex  设置为行内的弹性容器
          
          - 弹性元素
              - 弹性容器的直接子元素是弹性元素(弹性项)
              - 一个元素可以同时是弹性容器和弹性元素
              - 弹性元素可以同时是弹性容器


       -->
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </body>
</html>
